<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>游戏大厅</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
<div class="nav">五子棋对战</div>
<!-- 整个页面的容器元素 -->
<div class="container">
  <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
  <div>
    <!-- 展示用户信息 -->
    <div id="screen"></div>
    <!-- 匹配按钮 -->
    <div id="match-button">开始匹配</div>
      <div id="exit-login">退出登录<div>
  </div>

<!--  开始引入 jquary-->
   <script src = './js/jquery.min.js'></script>

<!--  使用 ajax 交互-->
    <script>
      // 如果玩家要退出登录
      let exitButton = document.querySelector("#exit-login");
      exitButton.onclick = function () {
        location.replace("/login.html");
      }

      $.ajax({
            // 属性
            type : 'get',
            url : '/getUser',
            success : function (result) {
                 // 先获取用户展示选择器
                // 使用query选择器之前要先使用 document 文本类
                let screenDiv = document.querySelector("#screen");
                screenDiv.innerHTML= "玩家: "+ result.userName + "  分数: " + result.score +
                "<br>  比赛场数：" +  result.totalCount  + "  获胜场数: " + result.winCount ;
            },
            error : function () {
                alert("玩家信息请求错误， 请重新登录!");
            }
        });

        // location.host 是调用当前的ip地址和端口号
        let webSocketUrl = "ws://" + location.host + "/findMatch";
        let webSocket = new WebSocket(webSocketUrl);
        // 建立连接
        webSocket.onopen = function () {
            console.log("建立连接成功!")
        };
        // 连接异常
        webSocket.onerror = function () {
            console.log("连接异常，请重新建立连接!");
        };
        // 关闭连接
        webSocket.onclose = function () {
            console.log("连接正常关闭!");
        };
        // 如果页面关闭了， 就调用 close 释放webSocket 对象
        window.onbeforeunload = function () {
            webSocket.close();
        }

        // 先获取按钮选择器
        let matchButton = document.querySelector("#match-button");

        // 建立连接之后，先写请求
        matchButton.onclick = function (response) {

            // 先确定是否连接成功还是失败
            if (webSocket.readyState == webSocket.OPEN) {
                // 如果状态是成功连接的
                if (matchButton.innerHTML == "开始匹配") {
                    // 点击前是 开始匹配
                    console.log("开始匹配!");
                    // 发送 message 并其中将 JSON对象转换为字符串
                    webSocket.send(JSON.stringify({
                        message: "startMatch"
                    }));
                } else if (matchButton.innerHTML == "正在匹配中...(点击停止)") {
                    console.log("停止匹配!");
                    webSocket.send(JSON.stringify({
                        message: "stopMatch"
                    }));
                } else {
                    console.log("匹配失败!");
                    alert("匹配错误,请联系客服!");
                }
            } else {
                // 如果连接失败
                console.log("连接失败!");
                alert("未建立连接，请重新登录!");
                location.replace("/login.html");
            }
        }

        // 现在由webSocket 接受来自服务器的响应
        webSocket.onmessage = function (result) {
            // 先将JSON字符串转化为 js对象
            let resp = JSON.parse(result.data);
            // 先判断响应是否成功
            if (!resp.ok) {
                console.log("响应失败，请重新发生请求!");
                alert("响应失败， 失败原因: " + resp.reason);
                location.replace("/login.html");
                return;
            }

            // 开始判断响应的类型
            if (resp.message == 'startMatch') {
                console.log("响应消息：" + resp.message);
                matchButton.innerHTML = "正在匹配中...(点击停止)";
            } else if (resp.message == 'stopMatch') {
                console.log("响应消息：" + resp.message);
                matchButton.innerHTML = "开始匹配";
            } else if (resp.message == 'matchSuccess') {
                console.log("成功匹配到对手");
                location.replace("/game_room.html");
            } else if (resp.message == 'repeatConnection') {
                console.log("此处禁止多开，请重新登录!");
                alert("此处禁止多开，请重新登录!")
                location.replace("/login.html");
            } else if(resp.message == 'successMatch'){
                location.replace("/game_room.html");
            } else {
                console.log("响应异常!");
                location.replace("/login.html");
            }



        }
    </script>

</div>
</body>